Estoy tratando de crear una aplicación de tareas pendientes en React. Actualmente estoy tratando de imprimir la entrada cuando presiono el botón +, pero no funciona. ¿Alguien puede ayudar a verificar mi sintaxis?
import React from 'react'; import './App.css'; class App extends React.Component { constructor(){ super(); this.state = { value: '', tasks: [] }; this.handleChange = this.handleChange.bind(this) this.addItem = this.addItem.bind(this) } handleChange(event) { this.setState({ value: event.target.value }) } addItem(){ this.state.tasks.push(this.state.value) } render(){ return( <div> <input type="text" value={this.state.value} onChange={this.handleChange}></input> <button onClick={this.addItem}>+</button> <button>-</button> <h1>{this.state.tasks}</h1> </div> ) } } export default App;Para cambiar el estado, debe usar this.setState . Consulte https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly . Leer la documentación de React puede ahorrarle mucho tiempo en general.
Necesitas establecer la tarea State
addItem() { const newTask = [this.state.value, ...this.state.tasks]; this.setState({ tasks: newTask }); this.setState({ value: "" }); }¡Modificar el estado directamente no es la forma correcta!
en su lugar, use setState:
this.setState({ tasks: this.state.tasks.concat(this.state.value) })